<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 0;
		}
		.homeimg {
			width: 60px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.home {
			width: 20px;
			height: 20px;
		}
		.words {
			padding-left: 40px;
		}
		.words ul {
			margin-top: 22px;
		}
		.words li {
			font-size: 16px;
			color: #606266;
			line-height: 2;
		}
		.orderbox {
			width: 100%;
			height: 300px;
			display: flex;
		}
		.orderinfo {
			width: calc(20% - 8px);
			height: 100%;
			margin-right: 8px;
		}
		.totalorder {
			width: 100%;
			height: 60px;
			background: #5cbea0;
			border-radius: 8px;
			color: #fff;
			padding-top: 5px;
			box-sizing: border-box;
		}
		.totalorder .numtitle {
			margin-top: 0;
		}
		.orderbox p {
			margin-left: 12px;
		}
		.neworder {
			border: 1px solid #ccc;
			width: 100%;
			height: 130px;
			margin-top: 12px;
		}
		.numtitle {
			font-size: 16px;
			margin-top: 5px;
		}
		.nums {
			font-size: 32px;
		}
		.jobs {
			display: flex;
			justify-content: space-between;
			padding-right: 10px;
			border: 1px solid #ddd;
			margin-top: 15px;
			width: 100%;
			height: 80px;
		}
		.orderrank {
			width: calc(20% - 8px);
			height: 100%;
			margin-left: 8px;
			background: rgb(94, 98, 104);
			color: #fff;
			border: 1px solid pink;
		}
		.ranktitle {
			font-size: 18px;
			white-space: nowrap;
			text-align: center;
			margin-top: 6px;
		}
		.rankline {
			width: 60%;
			height: 2px;
			background: #fff;
			margin: 10px auto;
		}
		.item {
			display: flex;
			justify-content: space-around;
		}
		.iteminfo {
			width: 20%;
			text-align: center;
			white-space: nowrap;
			font-size: 15px;
			line-height: 1.3;
		}
		.iteminfo:first-child {
			width: 10%;
		}
		.iteminfo:last-child {
			width: 30%;
		}
		.objectbox {
			margin-top: 10px;
			border: 1px solid #f4f4f4;
			padding: 10px;
		}
		.object {
			display: flex;
			flex-wrap: wrap;
		}
		.objectname {
			border: 1px solid #f3f3f3;
			font-size: 14px;
			width: 130px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			margin-right: 16px;
			margin-top: 16px;
		}
		.select {
			text-align: right;
			margin-top: 10px;
		}
		.table {
			margin-top: 20px;
			border: 1px solid #ccc;
		}
		.pagenation {
			text-align: center;
			margin-top: 40px;
		}
		#elcontain::-webkit-scrollbar {
			display: none;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
	</style>
</block>
<block name="content">
	<div>
		<div class="orderbox">
			<div class="orderinfo">
				<div class="totalorder">
					<p class="numtitle">订单总数</p>
					<p class="nums">1600</p>
				</div>
				<div class="neworder">
					<p class="numtitle">本月新增</p>
					<p class="nums">4</p>
				</div>
				<div class="jobs">
					<div>
						<p class="numtitle">进行中任务</p>
						<p class="nums">10</p>
					</div>
					<div>
						<p class="numtitle">已完成任务</p>
						<p class="nums">1234</p>
					</div>
				</div>
			</div>
			<iframe src="{:U('Index/map')}" width="60%" height="100%" frameborder="0" scrolling="no"></iframe>
			<div class="orderrank">
				<div class="ranktitle"><i class="el-icon-tickets"></i>订单总数 TOP 10 城市</div>
				<div class="rankline"></div>
				<div>
					<div class="item">
						<div class="iteminfo"></div>
						<div class="iteminfo"></div>
						<div class="iteminfo">任务数</div>
						<div class="iteminfo">占比</div>
					</div>
					<div class="item" v-for="(item, index) in cityRank" :key="index">
						<div class="iteminfo">{{index + 1}}</div>
						<div class="iteminfo">{{item.city}}</div>
						<div class="iteminfo">{{item.job}}</div>
						<div class="iteminfo">{{item.percent}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="objectbox">
			<div class="object">
				<div class="objectname">总任务（0）</div>
				<div class="objectname">待报价（0）</div>
				<div class="objectname">待确定报价（0）</div>
				<div class="objectname">待接受（0）</div>
				<div class="objectname">已接受（0）</div>
				<div class="objectname">生产完成（0）</div>
				<div class="objectname">待上画（0）</div>
				<div class="objectname">上画进行中（0）</div>
				<div class="objectname">待上画验收（0）</div>
				<div class="objectname">待下画（0）</div>
				<div class="objectname">下画进行中（0）</div>
				<div class="objectname">待下画验收（0）</div>
			</div>
			<div class="select">
				<el-input size="small" placeholder="请输入内容" v-model="searchinput">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="table">
				<el-table :data="tableData" height="250" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}" @row-click="toDetail">
					<el-table-column prop="orderno" label="订单编号"></el-table-column>
					<el-table-column prop="name" label="公司简称"></el-table-column>
					<el-table-column prop="checker" label="审核员"></el-table-column>
					<el-table-column prop="activity" label="活动名称"></el-table-column>
					<el-table-column prop="client" label="客戶"></el-table-column>
					<el-table-column prop="status" label="状态"></el-table-column>
					<el-table-column prop="charger" label="项目负责人"></el-table-column>
					<el-table-column prop="partner" label="城市合伙人"></el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;">{{scope.row.option}}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    searchinput: "",
                    // 城市排名
                    cityRank: [
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" },
                        { city: "深圳", job: "166", percent: "10.00%" }
                    ],
                    tableData: [
                        {
                            orderno: '201904102145',
                            name: '哈根达斯',
                            checker: "啊啊啊",
                            activity: "节日促销",
                            client: "海岸城店",
                            status: "进行中",
                            charger: "哈哈哈哈",
                            partner: "Damon",
                            option: "查看",
                            type: 1
                        },
                        {
                            orderno: '201904102146',
                            name: '哈根达斯',
                            checker: "啊啊啊",
                            activity: "节日促销",
                            client: "海岸城店",
                            status: "待报价",
                            charger: "哈哈哈哈",
                            partner: "Damon",
                            option: "查看",
                            type: 2
                        },
                        {
                            orderno: '201904102147',
                            name: '哈根达斯',
                            checker: "啊啊啊",
                            activity: "节日促销",
                            client: "海岸城店",
                            status: "进行中",
                            charger: "哈哈哈哈",
                            partner: "Damon",
                            option: "查看",
                            type: 1
                        },
                        {
                            orderno: '201904102148',
                            name: '哈根达斯',
                            checker: "啊啊啊",
                            activity: "节日促销",
                            client: "海岸城店",
                            status: "待报价",
                            charger: "哈哈哈哈",
                            partner: "Damon",
                            option: "查看",
                            type: 2
                        }
                    ]
                }
            },
            methods: {
                toDetail(row) {
                    window.location.href = "detail.html?type=" + row.type
                }
            }
        })
	</script>
</block>
